<template>
  <div class="allheader">
    <div class="allbody">
      <el-row class="headrow" :gutter="10">
        <el-col :span="7">
          <el-col :span="24">
            <el-row class="header-right" :gutter="1">
              <el-col :span="24">
                <el-col :span="24">
                  <div class="headerleft">
                    <div class="header-top">
                      <el-popover :width="200" trigger="hover">
                        <template #reference>
                          <el-button :icon="Share" round>分享</el-button>
                        </template>
                        <div style="text-align: center; margin: 10px 0">
                          扫码下载
                        </div>
                        <img
                          style="margin: auto; width: 100%; height: 100%"
                          src="@/assets/images/下载.png"
                        />
                      </el-popover>
                    </div>
                    <div class="header-top headuserImg">
                      <img src="@/assets/images/default_head@3x.png" />
                    </div>
                    <div class="header-top">
                      {{ userstate.name
                      }}
                      <span class="seximg"><img src="@/assets/images/性别男.png"></span>
                      <span class="grade">
                        <i>Lv.</i>
                        <i>2</i> </span
                      >
                    </div>
                    <div class="header-top">
                      <el-dropdown>
                        <span class="el-dropdown-link">
                          管理我的主页
                          <el-icon class="el-icon--right">
                            <arrow-down />
                          </el-icon>
                        </span>
                        <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item
                              ><RouterLink
                                style="text-decoration: none;color: #111111;"
                                to="/my/data"
                                >编辑资料</RouterLink
                              ></el-dropdown-item
                            >
                            <el-dropdown-item
                              ><RouterLink
                                style="text-decoration: none;color: #111111;"
                                to="/editmypersonalpage"
                                >编辑轮播图</RouterLink
                              ></el-dropdown-item
                            >
                            <el-dropdown-item
                              ><RouterLink
                                style="text-decoration: none;color: #111111;"
                                to="/editmypersonalpage"
                                >编辑简介</RouterLink
                              ></el-dropdown-item
                            >
                            <el-dropdown-item
                              ><RouterLink
                                style="text-decoration: none;color: #111111;"
                                to="/my/resource"
                                >资源动态管理</RouterLink
                              ></el-dropdown-item
                            >
                            <el-dropdown-item
                              ><RouterLink
                                style="text-decoration: none;color: #111111;"
                                to="/my/sale/CommodityManagement"
                                >商品管理</RouterLink
                              ></el-dropdown-item
                            >
                          </el-dropdown-menu>
                        </template>
                      </el-dropdown>
                    </div>
                    <div class="header-top">暂无简介</div>
                  </div>
                </el-col>
              </el-col>
              <el-col class="headerb" :span="12">
                <el-col :span="24">
                  <div class="headBody headBodyone">
                    <div>0</div>
                    <div>关注</div>
                  </div>
                </el-col>
              </el-col>
              <el-col class="headerb" :span="12">
                <el-col :span="24">
                  <div class="headBody">
                    <div>0</div>
                    <div>粉丝</div>
                  </div>
                </el-col>
              </el-col>
            </el-row>
          </el-col>
        </el-col>
        <el-col :span="16">
          <div class="bigUserImg">
            <img src="@/assets/images/default_head@3x.png" />
          </div>
        </el-col>
        <div style="margin: 10px auto">
          <el-menu
            mode="horizontal"
            :ellipsis="false"
            :default-active="activeIndex"
          >
            <el-menu-item index="1"
              ><RouterLink to="/userinfo/pdp">资源动态</RouterLink>
            </el-menu-item>
            <el-menu-item index="2"
              ><RouterLink to="/userinfo/gst"
                >商品服务</RouterLink
              ></el-menu-item
            >
          </el-menu>
        </div>
        <el-col :span="24">
          <div class="bodyfooter"><RouterView></RouterView></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ArrowDown } from "@element-plus/icons-vue";
import { reqUserInfo } from "@/api/loginInfo";
import { onMounted, reactive, ref } from "vue";
import { Share } from "@element-plus/icons-vue";

const activeIndex = ref("1");

onMounted(() => getuserinfo());

interface userState {
  name: string;
}

const userstate = reactive<userState>({
  name: "",
});

const getuserinfo = async () => {
  try {
    const result = await reqUserInfo();
    userstate.name = result.data.data.name;
    console.log(result);
  } catch (error) {}
};
</script>
<style lang="less" scoped></style>
<style scoped>
.allheader {
  background-color: #f5f7f9;
  min-height: 90vh;
}
.allbody {
  width: 1200px;
  margin: 0 auto;
}
.headrow {
  padding: 20px 0 0 0;
}
.bigUserImg {
  background-color: #fff;
  width: 900px;
  height: 450px;
  overflow: hidden;
}
.bigUserImg img {
  width: 100%;
  cursor: pointer;
  margin-top: -25%;
}
.headerleft {
  background-color: #fff;
  height: 370px;
}
.header-top:nth-of-type(1) {
  text-align: right;
  margin-right: 20px;
  cursor: pointer;
}

.header-top:nth-of-type(2) {
  margin: 0 auto;
  width: 110px;
  height: 110px;
  cursor: pointer;
}
.headuserImg img {
  border-radius: 50%;
  height: 100%;
  width: 100%;
}
.header-top {
  padding: 15px 0;
}

.header-top:nth-of-type(3) {
  text-align: center;
  font-size: 16px;
  padding: 4px 0 10px 0;
  cursor: pointer;
}
.header-top:nth-of-type(4) {
  margin: 0 auto;
  padding: 10px 0;
  text-align: center;
  background-color: #fbe9f2;
  width: 150px;
  border-radius: 19px;
  cursor: pointer;
}
.header-top:nth-of-type(5) {
  margin-left: 20px;
}
.el-dropdown-link {
  color: #f93684;
}
.headBody {
  text-align: center;
  cursor: pointer;
}
.headBodyone {
  border-right: 1px dashed;
}
.headerb {
  background-color: #fff;
  padding: 10px 0;
  margin-top: 10px;
}
.el-menu {
  background-color: #f5f7f9;
  text-decoration: none;
}
.bodyfooter {
  width: 100%;
  height: 600px;
}
.el-menu-item a {
  text-decoration: none;
}
.seximg img{
  width: 20px;
  height: 20px;
}
.grade{
  background-color: #FF37B7;
  margin-left: 10px;
  padding: 0 8px;
  border-radius: 3px;
  color: white;
  font-size: 12px;
}
</style>
